<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="我的订单"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader="scope">
				<el-button v-auth="'batchAdd'" type="danger" :icon="Delete" plain :disabled="!scope.isSelected"> 批量删除用户 </el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
			</template>
		</ProTable>
		<UserDrawer ref="drawerRef" />
	</div>
</template>

<script setup lang="tsx" name="myList">
import { ref, reactive, onMounted } from "vue";
import { orderMotherListDetail, orderUpdate } from "@/api/modules/order";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import UserDrawer from "@/views/orderList/components/UserDrawer.vue";
import { View, Delete } from "@element-plus/icons-vue";
import _ from "lodash";
import { useRoute } from "vue-router";
const route = useRoute();
onMounted(() => {});

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	tid: route.params.id
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	return {
		list: data.list,
		total: data.count
		// pageNum: data.pageNum,
		// pageSize: data.pageSize
	};
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const param = ref({});
const getTableList = (params: any) => {
	params.tid = route.params.id;
	param.value = params;
	let newParams = JSON.parse(JSON.stringify(params));
	return orderMotherListDetail(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const status = reactive([
	{
		userLabel: "是",
		userStatus: true
	},
	{
		userLabel: "否",
		userStatus: false
	}
]);
// 表格配置项
const columns: ColumnProps[] = [
	{
		prop: "mother_tid",
		label: "母系统单号",
		width: 180,
		fixed: "left"
	},
	{
		prop: "tid",
		label: "系统单号",
		width: 180
	},
	{
		prop: "tid",
		label: "是否为母单",
		width: 120,
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag style="margin-right:10px" type={scope.row.is_mother == 1 ? "success" : "danger"}>
						{scope.row.is_mother == 1 ? "是" : "否"}
					</el-tag>
				</>
			);
		}
	},
	{
		prop: "trade_code",
		label: "提单号",
		width: 180
	},
	{
		prop: "order.first_waybill_no",
		label: "主运单号",
		width: 160
	},
	{
		prop: "order.waybill_no",
		label: "从运单号",
		width: 160
	},
	{
		prop: "order.line.line_name",
		label: "线路",
		width: 120
	},
	{
		prop: "address",
		label: "订单标识",
		width: 200,
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag style="margin-right:10px" type={scope.row.order.label_data.is_error ? "success" : "info"}>
						{scope.row.order.label_data.is_error ? "异" : "异"}
					</el-tag>
					<el-tag style="margin-right:10px" type={scope.row.order.label_data.is_collect ? "success" : "info"}>
						{scope.row.order.label_data.is_collect ? "揽" : "揽"}
					</el-tag>
					<el-tag style="margin-right:10px" type={scope.row.order.label_data.is_complete ? "success" : "info"}>
						{scope.row.order.label_data.is_complete ? "完" : "完"}
					</el-tag>
					{scope.row.order.error ? (
						<el-tooltip class="box-item" effect="dark" content={scope.row.order.error} placement="top">
							<el-tag type={scope.row.order.label_data.is_pay ? "success" : "info"}>
								{scope.row.order.label_data.is_complete ? "支" : "支"}
							</el-tag>
						</el-tooltip>
					) : (
						<el-tag type={scope.row.order.label_data.is_pay ? "success" : "info"}>
							{scope.row.order.label_data.is_complete ? "支" : "支"}
						</el-tag>
					)}
				</>
			);
		}
	},
	{
		prop: "address",
		label: "状态",
		width: 100,
		render: (scope: { row: any }) => {
			return (
				<>
					<el-tag
						style="margin-right:10px"
						type={
							scope.row.order.status == 102
								? "info"
								: scope.row.order.status == 103
								? ""
								: scope.row.order.status == 104
								? "success"
								: "danger"
						}
					>
						{scope.row.order.status == 102
							? "待取号"
							: scope.row.order.status == 103
							? "已取号"
							: scope.row.order.status == 104
							? "已发货"
							: "已废弃"}
					</el-tag>
				</>
			);
		}
	},
	{ prop: "order.client.username", label: "客户名称", width: 120 },

	{
		prop: "order.order_no",
		label: "来源单号",
		width: 160
	},
	{
		prop: "order.receiver.name",
		label: "收件人",
		width: 120
	},
	// // 多级 prop
	{
		prop: "receiver",
		label: "电话",
		width: 150,
		render: (scope: { row: any }) => {
			return (
				<>
					+{scope.row.order.receiver.area_code} {scope.row.order.receiver.mobile}
				</>
			);
		}
	},
	{
		prop: "order.port.port_name",
		label: "走件口岸",
		width: 120
	},
	{
		prop: "order.weight",
		label: "结算重量(kg)",
		width: 120
	},
	{
		prop: "order.total_amount",
		label: "申报价值",
		width: 120
	},
	{ prop: "order.batch_no", label: "批次号", width: 150 },
	{
		prop: "order.created",
		label: "下单时间",
		width: 180
	},
	{ prop: "operation", label: "操作", fixed: "right", width: 100, align: "left" }
];
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref();
const openDrawer = (title: string, rowData: any = {}) => {
	rowData.order.user_mark = rowData.order.receiver.user_mark;
	rowData.order.client_address = rowData.order.receiver;
	let params = {
		title,
		rowData: { ...rowData.order },
		isView: title === "查看",
		api: title === "新增" ? orderUpdate : title === "编辑" ? orderUpdate : "",
		getTableList: proTable.value.getTableList
	};
	drawerRef.value.acceptParams(params);
};
</script>
<style scoped>
.selectClass {
	position: relative;
	top: -8px;
	left: 10px;
}
</style>
